<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="1.gif" alt="" id="img">
    <button id="up">上一张</button>
    <button id="down">下一张</button>
    <script>
        let imges = ["1.gif", "640.gif"];
        let currentIndex = 0;
        //创建事件源
        let myimg = document.querySelector('img')
        let upbtn = document.getElementById('up')
        let downbtn = document.getElementById('down')

        //添加监听器
        upbtn.addEventListener("click", showUp);
        downbtn.addEventListener("click", showDown);

        function showUp() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = imges.length - 1
            }
            myimg.src = imges[currentIndex];
        }
        function showDown() {
            currentIndex++;
            if (currentIndex > 0) {
                currentIndex = imges.length - 1
            }
            myimg.src = imges[currentIndex];
        }

        // //事件
        // upbtn.onclick = function () {
        //     img = img.src = "1.gif"
        // }

        // downbtn.onclick = function () {
        //     img = img.src = "640.gif"
        // }

    </script>
</body>

</html>